<template>
    <el-card shadow="always">
        <template #header>
            <div class="clearfix">
                <h3>修改密码</h3>
            </div>
        </template>
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="pwdForm" :rules="rules" label-width="auto"
            class="demo-ruleForm" status-icon>
            <el-form-item label="旧密码" prop="password">
                <el-input v-model="pwdForm.password" />
            </el-form-item>
            <el-form-item label="新密码" prop="newPwd">
                <el-input v-model="pwdForm.newPwd" />
            </el-form-item>
            <el-form-item label="重复密码" prop="newPassword" show-password>
                <el-input v-model="pwdForm.newPassword" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onsubmit(pwdForm)">
                    保存
                </el-button>
                <el-button @click="reset">取消</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { updatePwd } from '../../api/user';
// element-plus导入组件
import { ElMessage, ElNotification } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';

// 页面跳转
import { useRouter } from 'vue-router';
const router = useRouter();
const errorId = sessionStorage.getItem('userId')+''
if(errorId == undefined || errorId == ''){
    sessionStorage.setItem('error','not')
    router.push("/LimitsAuthority")
}

// 修改密码
const onsubmit = (pwd: any) => {
    if (!ruleFormRef.value) return;
    ruleFormRef.value.validate((valid: boolean) => {
        if (valid) {
            console.log('表单提交成功');
            pwd.id = (Number)(sessionStorage.getItem("userId") + "")
            updatePwd(pwd).then((res: any) => {
                if (res.code == 2000) {
                    ElNotification({
                        title: '成功',
                        message: '修改成功',
                        type: 'success',
                    });
                    reset();
                    router.push('/')
                    sessionStorage.clear()
                } else {
                    ElMessage.error(res.message);
                }
            });
        } else {
            ElMessage.error('表单校验失败');
        }
    });
}
// 重置
const reset = () => {
    pwdForm.password = '',
        pwdForm.newPwd = '',
        pwdForm.newPassword = ''
}
// 表单验证
interface RuleForm {
    id: number
    password: string
    newPwd: string
    newPassword: string
}

const ruleFormRef = ref<FormInstance>()
const pwdForm = reactive<RuleForm>({
    id: 0,
    password: '',
    newPwd: '',
    newPassword: '',
})
const newValValidate = (rule: any, value: string, callback: Function) => {
    if (value === pwdForm.password) {
        callback(new Error('新密码不能与旧密码一致'))
    } else if (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[._~!@#$^&*])[A-Za-z0-9._~!@#$^&*]{8,16}$/g.test(value)) {
        callback()
    } else {
        callback(new Error('请输入包含英文字母大小写、数字和特殊符号的 8-16 位组合'))
    }
}
const repeatValidate = (rule: any, value: string, callback: Function) => {
    if (value !== pwdForm.newPassword) {
        callback(new Error('两次输入密码不一致!'))
    } else {
        callback()
    }
}
const rules = reactive<FormRules<RuleForm>>({
    password: [
        { required: true, message: '请输入旧密码', trigger: 'blur' },
    ],
    newPwd: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
        {
            min: 8,
            max: 16,
            message: '长度应在 8 到 16 个字符',
            trigger: 'blur'
        },
        { validator: newValValidate, trigger: 'blur' }
    ],
    newPassword: [
        { required: true, message: '请再次输入新密码', trigger: 'blur' },
        { validator: repeatValidate, trigger: 'blur' }
    ],
})

</script>

<style scoped>
.el-card {
    margin: 0;
}
</style>